<!--
 * @Author: 'zhangkeqq' '2211709169@qq.com'
 * @Date: 2025-07-24 16:23:35
 * @LastEditors: 'zhangkeqq' '2211709169@qq.com'
 * @LastEditTime: 2025-08-04 16:03:26
 * @FilePath: \vue3-admin\src\views\login\index.vue
 * @Description: 登录页面
-->
<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header-wrapped">
                <div class="header-content">
                    <h3>通用后台管理系统</h3>
                    <span class="welcome">欢迎您的登录</span>
                </div>
            </el-header>
            <el-main>
                <div class="login-wrapped">
                    <el-card class="box-card">
                        <el-tabs v-model="activeName" class="demo-tabs" :stretch='true'>
                            <el-tab-pane label="登录" name="first">
                                <el-form class="login-form">
                                    <el-form-item label="账号">
                                        <el-input v-model="loginData.account" placeholder="请输入账号" />
                                    </el-form-item>
                                    <el-form-item label="密码">
                                        <el-input v-model="loginData.password" placeholder="请输入密码" show-password />
                                    </el-form-item>
                                    <!-- 底部外壳 -->
                                    <div class="footer-wrapped">
                                        <div class="forget-password">
                                            <span class="forget-password-button" @click="openForget">忘记密码</span>
                                        </div>
                                        <div class="footer-button">
                                            <el-button type="primary" @click="Login">登录</el-button>
                                        </div>
                                        <div class="footer-go-register">
                                            还没有账号？<span class="go-register">马上注册</span>
                                        </div>
                                    </div>
                                </el-form>
                            </el-tab-pane>
                            <el-tab-pane label="注册" name="second">
                                <el-form class="login-form">
                                    <el-form-item label="账号">
                                        <el-input v-model="registerData.account" placeholder="账号长度6-12位" />
                                    </el-form-item>
                                    <el-form-item label="密码">
                                        <el-input v-model="registerData.password" placeholder="密码需长度6-12位含字母数字" />
                                    </el-form-item>
                                    <el-form-item label="确认密码">
                                        <el-input v-model="registerData.rePassword" placeholder="请再次输入密码" />
                                    </el-form-item>
                                    <div class="footer-button">
                                        <el-button type="primary" @click="Register">注册</el-button>
                                    </div>
                                </el-form>
                            </el-tab-pane>

                        </el-tabs>
                    </el-card>
                </div>
            </el-main>
            <el-footer class="footer-wrapped">
                <div class="footer-content">
                    <div class="title">
                        <span>网络工程师</span> |
                        <span>全栈工程师</span> |
                        <span>阿里云社区博客专家</span> |
                        <span>CSND百万访问博主</span> |
                        <span>清华大学出版社签约作家</span>
                    </div>
                </div>
            </el-footer>
        </el-container>
    </div>
    <forget_password ref="forgetP"></forget_password>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import {useRouter} from 'vue-router'
import type { loginFormData } from '@/api/login/type'
import { register, login } from '@/api/login/index'
import { useUserInfo } from '@/store/modules/userinfo'
import {useMenu} from '@/store/modules/menu'
import forget_password from './components/forget_password.vue'
import { ElMessage } from 'element-plus'
import {loginLog} from '@/api/log/index'
const router = useRouter()
const store = useUserInfo()
const menuStore = useMenu()
const activeName = ref('first')
//登录数据
const loginData: loginFormData = reactive({
    account: '',
    password: '',
})
const forgetP = ref()
//点击忘记密码事件
const openForget = () => {
    forgetP.value.open()
}
//点击登录事件
const Login = async () => {
    const res:any = await login(loginData)
    if(res.status == 0){
        const { id, name,account,email,department } = res.results
        localStorage.setItem('token',res.token)
        localStorage.setItem('id',id)
        localStorage.setItem('name',name)
        localStorage.setItem('department',department)
        let data = {
            account,name,email
        }
        await loginLog(data)
        store.userInfo(id)
        setTimeout(()=>{
            router.push('/home')
        },1000)
        menuStore.getMenu()
        ElMessage({
            type:'success',
            message:'登录成功'
        })
    }else{
        ElMessage({
            type:'error',
            message:'登录失败，请检测账号和密码是否正确'
        })
    }
}

//注册数据
const registerData: loginFormData = reactive({
    account: '',
    password: '',
    rePassword: '',
})
//点击注册事件
const Register = async () => {
    if (registerData.password == registerData.rePassword) {
        let data: loginFormData = { account: registerData.account, password: registerData.password }
        const res = await register(data)
        if(res.status == 0){
            activeName.value = 'first'
            //赋值给登录
            Object.assign(loginData,{
                account: registerData.account,
                password: registerData.password,
            })
            //清空表单
            Object.assign(registerData,{
                account: '',
                password: '',
                rePassword: '',
            })
             ElMessage({
                type:'success',
                message:'注册成功'
            })
        }
    } else{
        ElMessage({
            type:'error',
            message:'注册失败，请检测账号和密码是否符合格式'
        })
    }

}
</script>

<style lang="scss" scoped>
// 头部外壳
.header-wrapped {

    // 头部内容
    .header-content {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        // 欢迎语
        .welcome {
            font-size: 13px;
        }
    }
}

// 主体部分
.el-main {
    background-image: url('@/assets/code.jpg');
    height: 600px;
    --el-main-padding: 0;

    // 登录外壳
    .login-wrapped {
        width: 1200px;
        height: 600px;
        margin: 0 auto;

        // 卡片样式
        .box-card {
            width: 350px;
            height: 375px;
            float: right;
            position: relative;
            top: 14%;

            .login-form {

                // 登录底部外壳
                .footer-wrapped {
                    display: flex;
                    flex-direction: column;

                    .forget-password {
                        display: flex;
                        justify-content: flex-end;
                        margin: 10px 0;

                        .forget-password-button {
                            font-size: 12px;
                            color: #409eff;
                            // 鼠标移入的效果
                            cursor: pointer;
                        }
                    }


                    .footer-go-register {
                        font-size: 12px;
                        margin: 12px 0;
                        display: flex;
                        justify-content: center;

                        .go-register {
                            font-size: 12px;
                            color: #409eff;
                            cursor: pointer;
                        }
                    }
                }

                // 底部登录按钮
                .footer-button {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                }
            }
        }
    }
}

// 底部外壳
.footer-wrapped {
    margin-top: 10px;

    // 底部内容
    .footer-content {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;

        // 底部介绍
        .title {
            color: #666;
        }

        span {
            color: #666;
            font-size: 12px;
        }
    }
}

// 表单边距
.el-form {
    margin-top: 30px;
}

// tabs标签
:deep(.el-tabs__item) {
    color: #333;
    font-size: 18px;
}

// 输入框高度
:deep(.el-input__inner) {
    height: 40px;
}

// 输入框标签字体高度
:deep(.el-form-item__label) {
    height: 40px;
    line-height: 40px;
}

// 登录按钮
:deep(.el-button) {
    width: 300px;
    height: 45px;
    font-size: 16px;
}
</style>
